import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';
import Moment from 'moment';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import yellowJindu from "../../assets/svg/yellowJindu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";

class TimeBuy extends Component {
    constructor(props) {
        super(props);
        this.timer = null;
        const {goodsDetailInfo} = this.props;
        this.state = {
            d:"",
            showHour:"",
            m:"",
            s:"",
            now:goodsDetailInfo.nowTime
        }
    }
    componentDidMount(){
        setInterval(this.countTime, 1000, 1000)
        this.countTime()
    }
    startTime = (time)=>{
        let seconds = parseInt(time / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = '0';
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        return `${showHour}:${m}`
    }
    Time=(a)=>{
        let seconds = parseInt(a/1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        return h
    }
    countTime=()=>{
        //获取当前时间
        const {goodsDetailInfo} = this.props;
        var now = this.state.now;
        //设置截止时间
        var end = goodsDetailInfo.endTime;
        var start = goodsDetailInfo.startTime;
        let seconds = start>now?parseInt((start - now) / 1000):parseInt((end - now) / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        this.setState({
            d:d,
            showHour:showHour,
            m:m,
            s:s,
            now:now+1000
        })
    }
    render() {
        const {goodsDetailInfo} = this.props;
        const {startTime,endTime} = goodsDetailInfo
        const {d,showHour,m,s}=this.state;
        return <div>
            {goodsDetailInfo.startTime<goodsDetailInfo.nowTime?
                <div style={{backgroundColor:"#ff0036",color:"#fff",height:"100%",paddingTop:".2rem",paddingBottom:".2rem"}}>
                    <WingBlank >
                        <Flex justify="between">
                            <div>
                                <span className="timeBuyTitle">限时抢购</span>
                                <div style={{marginTop:".25rem"}}>
                                    ¥<span style={{fontSize:".5rem",marginRight:".2rem"}}>{goodsDetailInfo.activityPrice }</span>
                                    <span style={{textDecoration:"line-through"}}>¥{goodsDetailInfo.storePrice}</span>
                                </div>
                            </div>
                            <Flex>
                                <div>
                                    <div style={{color:"#FBF433"}}>
                                        距结束
                                        <span>{d<10?"0"+d:d}</span> 天
                                        <span>{showHour<10?"0"+showHour:showHour}</span>  :
                                        <span>{m<10?"0"+m:m}</span>:
                                        <span>{s<10?"0"+s:s}</span>
                                    </div>
                                    <div className="zhengzaijindu">
                                        <div className="zhengzaijindu1" style={{width:`${goodsDetailInfo.percentage+"%"}`}}></div>
                                        已抢{goodsDetailInfo.percentage}%
                                    </div>
                                </div>
                                <div className="shandian"></div>
                            </Flex>
                        </Flex>
                    </WingBlank>
                </div>
                :<div style={{backgroundColor:"#00E079",color:"#fff",height:"100%",paddingTop:".2rem",paddingBottom:".2rem"}}>
                    <WingBlank >
                        <Flex justify="between">
                            <div>
                                <span className="timeBuyTitleOne">限时抢购</span>
                                <Flex style={{marginTop:".25rem"}}>
                                    <div>
                                        ¥<span style={{fontSize:".5rem",marginRight:".2rem"}}>{goodsDetailInfo.activityPrice }</span>
                                    </div>
                                    <div>
                                        <div style={{textDecoration:"line-through"}}>¥{goodsDetailInfo.storePrice}</div>
                                        <div>{goodsDetailInfo.remindNum}人关注</div>
                                    </div>
                                </Flex>
                            </div>
                            <Flex>
                                <div>
                                    <div style={{color:"#11633E"}}>
                                        距开始
                                        <span>{d<10?"0"+d:d}</span> 天
                                        <span>{showHour<10?"0"+showHour:showHour}</span>  :
                                        <span>{m<10?"0"+m:m}</span>:
                                        <span>{s<10?"0"+s:s}</span>
                                    </div>
                                    <div className="jijiangjindu">
                                        {this.Time(startTime-endTime)>24?Moment(startTime-endTime).format('MM'+"月"+'DD'+"日开抢"):"明天"+this.startTime(goodsDetailInfo.startTime)+"开抢"}
                                    </div>
                                </div>
                                <div className="shandian"></div>
                            </Flex>
                        </Flex>
                    </WingBlank>
                </div>}

            </div>

    }
}

export default connect(({ goodsDetail }) => ({ goodsDetail }))(TimeBuy);